<!--大小额贷记来账手工处理页面-->
<template>
  <div class="app-container">
    <el-form ref="form" :model="form">
      <el-row :gutter="20">
        <el-col :span="7">
          <el-form-item label="交易类别" label-width="80px" prop="businessType">
            <el-select v-model="form.businessType" placeholder="请选择交易类别">
              <el-option label="退汇" value="4"></el-option>
              <el-option label="商业汇票" value="5"></el-option>
              <el-option label="跨境业务" value="6"></el-option>
              <el-option label="金融机构" value="7"></el-option>
              <el-option label="异常" value="8"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="交易流水号" label-width="80px" prop="bepsId">
            <el-input placeholder="请输入交易流水号" v-model="form.bepsId" />
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="收款人账号" label-width="80px" prop="colleNo">
            <el-input placeholder="请输入收款人账号" v-model="form.colleNo" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="7">
          <el-form-item label="收款人名称" label-width="80px" prop="colleName">
            <el-input placeholder="请输入收款人名称" v-model="form.colleName" />
          </el-form-item>
        </el-col>

        <el-col :span="9">
          <el-form-item label="清算日期" label-width="80px" prop="workDate">
            <el-date-picker
              v-model="form.workDate"
              type="daterange"
              style="width: 100%"
              range-separator="-"
              value-format="yyyyMMdd"
              start-placeholder="请输入清算开始日期"
              end-placeholder="请输入清算结束日期"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="BOP信息补录" label-width="86px" prop="BopInfo">
            <el-select v-model="form.BopInfo" :disabled="checkVisible" placeholder="请选择BOP信息补录">
              <el-option label="自动补录" value="1"></el-option>
              <el-option label="人工补录" value="2"></el-option>
              <el-option label="未补录" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="1" style="margin-left: -10px; margin-top: 5px">
          <el-checkbox v-model="form.checkedBOP" @change="bopCheck"></el-checkbox>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="7">
          <el-form-item label="HOTSCAN检查结果" label-width="120px" prop="hotScanResult">
            <el-select collapse-tags multiple v-model="form.hotScanResult" placeholder="请选择HOTSCAN检查结果">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="10">
          <el-form-item label="金额区间" label-width="80px">
            <el-row>
              <el-col :span="10">
                <el-form-item prop="miniMoney">
                  <el-input placeholder="最小金额" v-model="form.miniMoney" />
                </el-form-item>
              </el-col>
              <el-col :span="1" style="margin-left: 5px">-</el-col>
              <el-col :span="10">
                <el-form-item prop="maxMoney">
                  <el-input placeholder="最大金额" v-model="form.maxMoney" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search(form)">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <el-col :span="6" :offset="22" class="menu-tree">
        <svg-icon icon-class="down_circle" className="menu-tool-btn" />
        <svg-icon icon-class="search-circle" className="menu-tool-btn" />
        <svg-icon icon-class="search-circle_1" className="menu-tool-btn" />
        <svg-icon icon-class="menu-circle" className="menu-tool-btn" />
      </el-col>

      <el-table :data="tableData" style="width: 100%; margin-top: 10px" height="400px">
        <el-table-column prop="transNo" label="交易流水号" sortable width="250"></el-table-column>
        <el-table-column prop="colleNo" label="收款人账号" sortable width="250"></el-table-column>
        <el-table-column prop="colleName" label="收款人名称" sortable width="250"></el-table-column>
        <el-table-column prop="workDate" label="工作日期" sortable width="250"></el-table-column>
        <el-table-column prop="businessType" label="交易类别" sortable width="150"></el-table-column>
        <el-table-column prop="moneyRange" label="金额" sortable width="250"></el-table-column>
        <el-table-column prop="sysNO" label="系统编号" sortable width="250"></el-table-column>
        <el-table-column prop="accDate" label="处理时间" sortable width="250"></el-table-column>
        <el-table-column prop="accTime" label="处理状态" sortable width="150"></el-table-column>
        <el-table-column fixed="right" class="table-header-cell" label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click.native.prevent="detailRow(scope.$index, tableData)" type="text" size="small">
              明细
            </el-button>
          </template>
        </el-table-column>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 20, 40]"
            :page-size="10"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="20"
          ></el-pagination>
        </div>
      </el-table>

      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="10"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="20"
        ></el-pagination>
      </div>
    </el-form>

    <el-dialog
      title="大小额贷记来账业务手工处理明细"
      :visible.sync="dialogVisible"
      width="1024px"
      center
      :before-close="handleClose"
    >
      <el-form :model="formData" label-width="150px" :rules="rules">
        <!-- 基本信息 -->
        <el-card class="form-card txnInfo-card">
          <el-row>
            <el-col :span="8">
              <el-form-item label="交易类别" label-width="80px" prop="transType">
                <el-select v-model="formData.transType" disabled placeholder="">
                  <el-option label="退汇" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="业务种类" label-width="80px" prop="businessKind">
                <el-select v-model="formData.businessKind" disabled placeholder="请选择业务类型">
                  <el-option label="城市商业银行汇票资金移存" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="业务类型" label-width="80px" prop="businessType">
                <el-select v-model="formData.businessType" disabled placeholder="请选择业务类型">
                  <el-option label="退汇" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="收款人账号" class="payeeCount" label-width="80px" prop="colleAccount">
                <el-input v-model="formData.colleAccount" placeholder="" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="收款人名称" label-width="80px" prop="colleName">
                <el-input v-model="formData.colleName" placeholder="" disabled />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="付款人账号" label-width="80px" prop="payAccount">
                <el-input v-model="formData.payAccount" placeholder="" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="付款人名称" label-width="80px" prop="payName">
                <el-input v-model="formData.payName" placeholder="" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="付款人行名" label-width="80px" prop="payOpenBankNname">
                <el-input v-model="formData.payOpenBankNname" placeholder="" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="金额" label-width="80px" prop="money">
                <el-input v-model="formData.money" placeholder="" disabled />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="被退回原因" label-width="80px" prop="backReason">
                <el-input v-model="formData.backReason" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="清算日期" label-width="80px" prop="workDate">
                <el-date-picker
                  v-model="formData.liquidationDate"
                  type="date"
                  value-format="yyyyMMdd"
                  placeholder=""
                  disabled
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="HOTSCAN检查结果" label-width="120px" prop="hotScanResult">
                <el-input v-model="formData.hotScanResult" placeholder="" disabled />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="附言" label-width="80px" prop="remarks">
                <el-input type="textarea" class="textarea" v-model="formData.remarks" disabled />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="记账账号" label-width="80px" prop="accountNo">
                <el-input v-model="formData.accountNo" placeholder="入客户账时必输" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户编号" label-width="80px" prop="customerNo">
                <el-input v-model="formData.customerNo" placeholder="入客户账时选输" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="记账名称" label-width="80px" prop="accountName">
                <el-input v-model="formData.accountName" placeholder="根据记账账号自动回显" disabled />
              </el-form-item>
            </el-col>

            <!-- <el-col :span="12">
              <el-form-item label="账名登录" label-width="80px" prop="accountNameLogin">
                <el-select v-model="formData.accountNameLogin">
                  <el-option label="是" value="1"></el-option>
                  <el-option label="否" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="付款人身份" label-width="90px" prop="payerIdentity">
                <el-select v-model="formData.payerIdentity" :popper-append-to-body="false">
                  <el-option label="居民" value="1"></el-option>
                  <el-option label="非居民" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="付款人性质" label-width="90px" prop="payerNature">
                <el-select v-model="formData.payerNature">
                  <el-option label="个人" value="1"></el-option>
                  <el-option label="单位" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="货物贸易交易" label-width="95px" prop="goodsTradeTrans">
                <el-select v-model="formData.goodsTradeTrans">
                  <el-option label="是" value="1"></el-option>
                  <el-option label="否" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </el-form>

      <el-row slot="footer">
        <el-col :span="2" :offset="4">
          <el-button type="success" @click="intoCuster" :loading="isLoading">入客户账</el-button>
        </el-col>
        <el-col :span="2" :offset="1">
          <el-button type="success" @click="intoBP" :loading="isLoading">入BP</el-button>
        </el-col>
        <el-col :span="2" :offset="1">
          <el-button type="danger" @click="reject" :loading="isLoading">退汇/重汇</el-button>
        </el-col>
        <el-col :span="2" :offset="1">
          <el-button type="primary" @click="otherBank" :loading="isLoading">交其他部门</el-button>
        </el-col>
        <el-col :span="2" :offset="1">
          <el-button @click="close">关闭</el-button>
        </el-col>
      </el-row>
      <!-- <span slot="footer" class="dialog-footer" :gutter="40">
        <el-button type="success" @click="intoCuster" :loading="isLoading">入客户账</el-button>
        <el-button type="success" @click="intoBP" :loading="isLoading">入BP</el-button>
        <el-button type="danger" @click="reject" :loading="isLoading">退汇/重汇</el-button>
        <el-button type="primary" @click="otherBank" :loading="isLoading">交其他部门</el-button>
        <el-button @click="close">关闭</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>
<script>
import AmountRangeSearch from "@/views/components/AmountSearchInput";
export default {
  name: "HvpsBepsCreditVostroHdWk",
  components: {
    AmountRangeSearch,
  },

  data() {
    return {
      currentPage4: 1, // 分页
      dialogVisible: false,
      checkVisible: true,
      isLoading: false,
      checkFlag:"0",
      options: [
        {
          value: "1",
          label: "AP",
        },
        {
          value: "2",
          label: "MP",
        },
        {
          value: "3",
          label: "AH",
        },
        {
          value: "4",
          label: "MI",
        },
        {
          value: "5",
          label: "MF",
        },
        {
          value: "6",
          label: "无需检查",
        },
        {
          value: "7",
          label: "检查中",
        },
      ],
      form: {
        category: "", // 类别
        bepsId: "", // 交易流水号
        cpgDate: "", // CPG日期
        nonStp: "", // non-STP原因
        workDate: "", // 清算日期
        resource: "1", // 选项
        trabsDate: "", // 交易起息日期
        type: "0", // 类型
        colleNo: "", // 收款人账号
        colleName: "", // 收款人名称
        businessType: "", // 交易类别
        miniMoney: "", // 最小金额
        maxMoney: "", // 最大金额
        hotScanResult: ["2", "3"], // HOTSCAN检查结果
        BopInfo: "", // Bop信息补录
        checkedBOP: "", // BOP信息补录复选框
      },

      tableData: [
        {
          transNo: "12345678901111", // 交易流水号
          colleNo: "4355656557854678", // 收款人账号
          colleName: "张三", // 收款人名称
          workDate: "2023-10-09", // 工作时间
          businessType: "退汇", // 交易类别
          moneyRange: "100,000", // 金额
          sysNO: "3124454565467", // 系统编号
          accDate: "2023-11-11", // 处理时间
          accTime: "待处理", // 处理状态
        },
        {
          transNo: "12345678901111", // 交易流水号
          colleNo: "4355656557854678", // 收款人账号
          colleName: "张三", // 收款人名称
          workDate: "2023-10-09", // 工作时间
          businessType: "退汇", // 交易类别
          moneyRange: "100,000", // 金额
          sysNO: "3124454565467", // 系统编号
          accDate: "2023-11-11", // 处理时间
          accTime: "待处理", // 处理状态
        },
        {
          transNo: "12345678901111", // 交易流水号
          colleNo: "4355656557854678", // 收款人账号
          colleName: "张三", // 收款人名称
          workDate: "2023-10-09", // 工作时间
          businessType: "退汇", // 交易类别
          moneyRange: "100,000", // 金额
          sysNO: "3124454565467", // 系统编号
          accDate: "2023-11-11", // 处理时间
          accTime: "待处理", // 处理状态
        },
        {
          transNo: "12345678901111", // 交易流水号
          colleNo: "4355656557854678", // 收款人账号
          colleName: "张三", // 收款人名称
          workDate: "2023-10-09", // 工作时间
          businessType: "退汇", // 交易类别
          moneyRange: "100,000", // 金额
          sysNO: "3124454565467", // 系统编号
          accDate: "2023-11-11", // 处理时间
          accTime: "待处理", // 处理状态
        },
        {
          transNo: "12345678901111", // 交易流水号
          colleNo: "4355656557854678", // 收款人账号
          colleName: "张三", // 收款人名称
          workDate: "2023-10-09", // 工作时间
          businessType: "退汇", // 交易类别
          moneyRange: "100,000", // 金额
          sysNO: "3124454565467", // 系统编号
          accDate: "2023-11-11", // 处理时间
          accTime: "待处理", // 处理状态
        },
        {
          transNo: "12345678901111", // 交易流水号
          colleNo: "4355656557854678", // 收款人账号
          colleName: "张三", // 收款人名称
          workDate: "2023-10-09", // 工作时间
          businessType: "退汇", // 交易类别
          moneyRange: "100,000", // 金额
          sysNO: "3124454565467", // 系统编号
          accDate: "2023-11-11", // 处理时间
          accTime: "待处理", // 处理状态
        },
        {
          transNo: "12345678901111", // 交易流水号
          colleNo: "4355656557854678", // 收款人账号
          colleName: "张三", // 收款人名称
          workDate: "2023-10-09", // 工作时间
          businessType: "退汇", // 交易类别
          moneyRange: "100,000", // 金额
          sysNO: "3124454565467", // 系统编号
          accDate: "2023-11-11", // 处理时间
          accTime: "待处理", // 处理状态
        },
        {
          transNo: "12345678901111", // 交易流水号
          colleNo: "4355656557854678", // 收款人账号
          colleName: "张三", // 收款人名称
          workDate: "2023-10-09", // 工作时间
          businessType: "退汇", // 交易类别
          moneyRange: "100,000", // 金额
          sysNO: "3124454565467", // 系统编号
          accDate: "2023-11-11", // 处理时间
          accTime: "待处理", // 处理状态
        },
        {
          transNo: "12345678901111", // 交易流水号
          colleNo: "4355656557854678", // 收款人账号
          colleName: "张三", // 收款人名称
          workDate: "2023-10-09", // 工作时间
          businessType: "退汇", // 交易类别
          moneyRange: "100,000", // 金额
          sysNO: "3124454565467", // 系统编号
          accDate: "2023-11-11", // 处理时间
          accTime: "待处理", // 处理状态
        },
        {
          transNo: "12345678901111", // 交易流水号
          colleNo: "4355656557854678", // 收款人账号
          colleName: "张三", // 收款人名称
          workDate: "2023-10-09", // 工作时间
          businessType: "退汇", // 交易类别
          moneyRange: "100,000", // 金额
          sysNO: "3124454565467", // 系统编号
          accDate: "2023-11-11", // 处理时间
          accTime: "待处理", // 处理状态
        },
      ],

      formData: {
        // 基本信息
        transId: "HVPS2023081500505196", // 交易流水号
        sysNO: "HVPS-大额支付系统", // 系统编号
        workDate: "2023-11-10", // 工作日期
        cgpDate: "2023-1-10", // CPG日期
        messageType: "hvps.111-客户发起汇兑业务报文", // 报文类型
        businessType: "退汇", // 业务类型
        transType: "1", // 交易类别
        businessKind: "城市商业银行汇票资金移存", // 业务种类
        currency: "CNY", // 币种
        money: "CNY 1000,000,00.23", // 金额
        liquidationDate: "2023-1-10", // 清算日期
        remarks: "附言", // 附言

        // 付款人信息
        payAccount: "14325463241321324", // 付款人账号
        payName: "张三", // 付款人名称
        payBankNo: "4675465674567", // 付款行行号
        payBankName: "中国建设银行", // 付款人开户行行号
        payOpenBankNo: "14325463241321324", // 付款人账号
        payOpenBankNname: "中国建设银行", // 付款人开户行行名

        // 收款人信息
        colleAccount: "3563563547673546", // 收款人账号
        colleName: "李四", // 收款人名称
        colleBankNo: "13413241324", // 收款行行号
        colleBankName: "中国工商银行", // 收款人开户行行号
        colleOpenBankNo: "7585785854677342", // 收款人账号
        colleOpenBankNname: "中国工商银行", // 收款人开户行行名

        // 处理信息
        hotScanResult: "AP", // HOTSCAN检查结果
        type: "来账", // 类型
        stpReason: "non-STP原因", // non-STP原因
        backReason: "被退回原因", // 被退回原因
        accountNo: "", // 记账账号
        customerNo: "", // 客户编号
        accountName: "", // 账户名称
        accountNameLogin: "", //账名登录

        // BOP信息
        payerIdentity: "1", // 付款人身份
        payerNature: "2", // 付款人性质
        goodsTradeTrans: "1", // 货物贸易交易
      },
      rules: {
        payerIdentity: [{ required: true, message: "请选择付款人身份", trigger: "blur" }],
        payerNature: [{ required: true, message: "请选择付款人性质", trigger: "blur" }],
        goodsTradeTrans: [{ required: true, message: "请选择货物贸易交易", trigger: "blur" }],
      },
    };
  },

  methods: {
    // 搜索
    search(data) {
      console.log(data, "data");
      console.log("搜索");
    },

    // 重置
    reset() {
      this.resetForm("form");
    },

    //类型下拉框
    chooseType(row) {
      console.log(row, "chooseType");
      if (row == "2") {
        this.form.workDate = ["20231109", "20231110"];
      } else {
        this.form.workDate = ["20231110", "20231110"];
      }
    },
    detailRow(index, rows) {
      console.log("详情");
      this.dialogVisible = true;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    handleClose(done) {
      this.dialogVisible = false;
    },

    // 入客户账
    intoCuster() {
      console.log("入客户账");
      this.$confirm("特殊账户，确定入账吗?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "入账成功!",
          });
        })
        .catch(() => {
          console.log("取消入账");
        });
    },
    // 入BP
    intoBP() {
      console.log("入BP");
    },
    // 退汇/重汇
    reject() {
      console.log("退汇/重汇");
    },
    // 交其他部门
    otherBank() {
      console.log("交其他部门");
    },
    // 关闭
    close() {
      this.dialogVisible = false;
    },

    // BOP复选框
    bopCheck(row) {
      if (row) {
        this.checkVisible = false;
        this.checkFlag = "1";
      } else {
        this.checkVisible = true;
        this.checkFlag = "0";
        this.form.BopInfo = "";
      }
    },
  },
};
</script>
<style lang="scss">
.menu-tool-btn {
  width: 24px;
  height: 24px;
}

.menu-tree {
  width: 100%;
  height: 5%;
  //margin-top: -20px;
  //margin-left: 92%;
  font-size: 28px;
}

.block {
  float: right;
}

.table-header-cell {
  background-color: #e7e7e7 !important;
  font-size: 12px !important;
}

.el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th {
  background-color: #e7e7e7;
  font-size: 12px;
  height: 40px;
}

.el-table .el-table__header-wrapper,
.el-table .el-table__fixed-header-wrapper {
  height: 40px;
}

.form-card {
  margin-bottom: 10px;
}

.textarea textarea {
  height: 60px;
}
.payeeCount label {
  color: blue;
}
</style>
